//
//  GridDemo.swift
//  SwiftUIDemo
//
//  Created by Tilt Wang on 2025/6/26.
//

import SwiftUI

struct GridDemo: View {
    var body: some View {
        let columns: [GridItem] = [
            GridItem(.flexible(), spacing: 6, alignment: nil),
            GridItem(.flexible(), spacing: 6, alignment: nil),
            GridItem(.flexible(), spacing: 6, alignment: nil),
        ]
//        let columns: [GridItem] = [
//            GridItem(.adaptive(minimum: 50, maximum: 300), spacing: nil, alignment: nil),
//            GridItem(.adaptive(minimum: 150, maximum: 300), spacing: nil, alignment: nil),
//        ]
//        let columns: [GridItem] = [
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//        ]
//        let columns: [GridItem] = [
//            GridItem(.fixed(50), spacing: nil, alignment: nil),
//            GridItem(.fixed(75), spacing: nil, alignment: nil),
//            GridItem(.fixed(100), spacing: nil, alignment: nil),
//            GridItem(.fixed(75), spacing: nil, alignment: nil),
//            GridItem(.fixed(50), spacing: nil, alignment: nil)
//        ]
        
        ScrollView {
            Rectangle()
                .fill(.orange)
                .frame(height: 400)
            
            LazyVGrid(columns: columns, alignment: .center, spacing: 6, pinnedViews: [.sectionHeaders]) {
                
                Section(header: Text("Section 1")
                    .foregroundColor(.white)
                    .font(.title)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.blue)
                    .padding()
                ) {
                    ForEach(0..<20) {index in
                        Rectangle()
                            .frame(height: 150)
                    }
                }
                
                Section(header: Text("Section 1")
                    .foregroundColor(.white)
                    .font(.title)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(Color.red)
                    .padding()
                ) {
                    ForEach(0..<20) {index in
                        Rectangle()
                            .fill(Color.green)
                            .frame(height: 150)
                    }
                }
                
//                ForEach(0..<50) {index in
//                    Rectangle()
//                        .frame(height: 150)
//                }
            }
            
//            LazyVGrid(columns: columns) {
//                ForEach(0..<50) {index in
//                    Rectangle()
//                        .frame(height: 150)
//                }
//            }
        }
    }
}

#Preview {
    GridDemo()
}
